<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">活动时间轴</view>
		</cu-custom>
		<view class="cu-timeline" v-for="(item, index) in activityList" :key="item.id">
			<view class="cu-time">
				<view>{{item.time}}</view>
			</view>
			<view class="cu-item" :class="item.fold?'cuIcon-right':'cuIcon-unfold'">
				<view class="content" style="font-family: TsangerYuYangT W03;" @click="foldActivity(index)">
					<view>{{item.title}}</view>
					<view @click.stop="mapNavi(index)">活动地点: {{item.place}}</view>
					<view>活动简介: {{item.content}}</view>
				</view>
			</view>
			<view class="cu-item" v-if="!item.fold" v-for="shd in item.schedule" :key="shd.time"
				:class="shd.present?'text-blue':''">
				<view class="content">
					<view class="cu-capsule radius">
						<view class="cu-tag bg-cyan">{{timeRange(shd.time)}}</view>
						<view class="cu-tag line-cyan">{{shd.time}}</view>
					</view>
					<view class="margin-top">
						<view>{{shd.content}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				url: this.url,
				activityList: [
					// 	{
					// 	_id: '01',
					// 	title: '金秋艺术节',
					// 	content: '一年一度的金秋艺术节等你来参加, 名额有限, 速来报名!',
					// 	time: '09-18',
					// 	place: {
					// 		name: '梅园操场',
					// 		latitude: 30.535360857133234,
					// 		longitude: 114.36296577358243
					// 	},
					// 	fold: true,
					// 	schedule: [{
					// 		time: '10:00',
					// 		content: '参加活动人员签到',
					// 		present: true
					// 	}, {
					// 		time: '10:15',
					// 		content: '主持人宣布活动开始',
					// 		present: false
					// 	}, {
					// 		time: '10:30',
					// 		content: '活动颁奖典礼',
					// 		present: false
					// 	}, {
					// 		time: '11:00',
					// 		content: '活动结束, 有序退场',
					// 		present: false
					// 	}]
					// }, {
					// 	_id: '02',
					// 	title: '清泉计划',
					// 	content: '在亲近大自然的过程中学会更多环境保护的知识!',
					// 	time: '10-25',
					// 	place: {
					// 		name: '教五102',
					// 		latitude: 30.535360857133234,
					// 		longitude: 114.36296577358243
					// 	},
					// 	fold: true,
					// 	schedule: [{
					// 		time: '10:00',
					// 		content: '在指定地点集合',
					// 		present: false
					// 	}, {
					// 		time: '10:15',
					// 		content: '环保知识抢答、拍照留念',
					// 		present: false
					// 	}, {
					// 		time: '10:30',
					// 		content: '活动颁奖典礼',
					// 		present: false
					// 	}, {
					// 		time: '11:00',
					// 		content: '活动结束, 有序退场',
					// 		present: false
					// 	},
					// 	]
					// }
				],
				currentPage: 0,
				pageSize: 10,
				place: {
					
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			timeRange(time) {
				return parseInt(time.slice(0, 2)) > 12 ? '下午' : '上午'
			},
			foldActivity(index) {
				this.activityList[index].fold = !this.activityList[index].fold
				if (this.activityList[index].schedule == '') {
					uni.request({
						method: 'GET',
						url: this.url + '/schedule',
						data:{
							activityId: this.activityList[index].id
						},
						header: {
							Authorization: 'Bearer ' + this.userInfo.token
						},
						success: (res) => {
							if (res.statusCode == 200) {
								this.activityList[index].schedule = res.data
							}
						}
					})
				}
			},
			mapNavi(index) {
				uni.request({
					method: 'GET',
					url: this.url + '/place',
					header: {
						Authorization: 'Bearer ' + this.userInfo.token
					},
					data: {
						placeId: this.activityList[index].placeId
					},
					success: (result) => {
						console.log(result)
						if(result.statusCode == 200){
							uni.openLocation({
								latitude: result.data.latitude,
								longitude: result.data.longitude,
								name: result.data.name,
								success: (res) => {
									console.log(res)
								},
								fail: (err) => {
									console.log(err)
								}
							})
						}
					}
				})
			}
		},
		onLoad() {
			uni.request({
				method: 'GET',
				url: this.url + '/schedule/' + this.userInfo.userId,
				data: {
					pageNum: this.currentPage,
					pageSize: this.pageSize
				},
				header: {
					Authorization: 'Bearer ' + this.userInfo.token
				},
				success: (res) => {
					console.log(res)
					if (res.statusCode == 200) {
						this.currentPage++
						this.activityList = res.data
						this.activityList.forEach(item => {
							// Object.defineProperty(item, 'fold', )
							this.$set(item, 'fold', true)
							this.$set(item, 'schedule', [])
							// item.defi
							// item.fold = true
						})
					}
				}
			})
			// uni.request({
			// 	method: 'GET',
			// 	url: this.url + '/schedule',
			// 	header: {
			// 		Authorization: 'Bearer ' + this.userInfo.token
			// 	},
			// 	data: {
			// 		userName: this.userInfo.userName
			// 	},
			// 	success: (res) => {
			// 		console.log(res)
			// 		this.activityList = res.data
			// 	}
			// })
			// uni.request({
			// 	method: 'GET',
			// 	url: this.url + '/schedule/' + this.userInfo.userName,
			// 	header: {
			// 		Authorization: 'Bearer ' + this.userInfo.token
			// 	},
			// 	success: (res) => {
			// 		console.log(res)
			// 	}
			// })
		}
	}
</script>

<style>

</style>
